RealtimeChart.componentDidMount - Code Metrics - Inspection of "Merge branch 'develop'" - myems/myems-web - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( 669be3...4762c7 )

by Guangyu

created 2021-02-16 10:32 UTC

RealtimeChart.componentDidMount C

↳ Parent: RealtimeChart

Complexity

Conditions

Size

Total Lines	94
Code Lines	74

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	74
dl	0
loc	94
rs	5.5175
c	0
b	0
f	0
cc	9

How to fix Long Method

import React, { Component } from 'react';
import { Line } from 'react-chartjs-2';
import range from 'lodash/range';
import { Card, CardHeader, CardBody, ListGroup, ListGroupItem } from 'reactstrap';
import { rgbaColor } from '../../../helpers/utils';
import { withTranslation } from 'react-i18next';
import uuid from 'uuid/v1';
import { APIBaseURL } from '../../../config';
import { getCookieValue, createCookie } from '../../../helpers/utils';
import { toast } from 'react-toastify';


const dividerBorder = '1px solid rgba(255, 255, 255, 0.15)';
const listItemBorderColor = 'rgba(255, 255, 255, 0.05)';

class RealtimeChart extends Component {
  _isMounted = false;
  refreshInterval;
  refreshTimeout;
  state = {
    pointList: [],
  };

  componentWillUnmount() {
    this._isMounted = false;
    clearInterval(this.refreshInterval);
    clearTimeout(this.refreshTimeout);
  }

  componentDidMount() {
    console.log(this.props);
    this._isMounted = true;
    // fetch realtime data at the first time
    let isResponseOK = false;
    if (this.props.distributionSystemID != undefined) {
      fetch(APIBaseURL + '/reports/distributionsystem?distributionsystemid=' + this.props.distributionSystemID, {
        method: 'GET',
        headers: {
          "Content-type": "application/json",
          "User-UUID": getCookieValue('user_uuid'),
          "Token": getCookieValue('token')
        },
        body: null,

      }).then(response => {
        if (response.ok) {
          isResponseOK = true;
        }
        return response.json();
      }).then(json => {
        if (isResponseOK) {
          console.log(json);
          let pointList = [];
            json.forEach((currentCircuit, circuitIndex) => {
              json[circuitIndex]['points'].forEach((currentPoint, pointIndex) => {
                let pointItem = {}
                pointItem['circuit'] = currentCircuit['name'];
                pointItem['point'] = currentPoint['name'];
                pointItem['value'] = currentPoint['value'];
                pointItem['units'] = currentPoint['units'];
                pointList.push(pointItem);
              });
            });
          if (this._isMounted) {
            this.setState({ 
              pointList: pointList,
            });
          }
        } else {
          toast.error(json.description)
        }
      }).catch(err => {
        console.log(err);
      });
    };

    //fetch realtime data at regular intervals
    this.refreshInterval = setInterval(() => {
      let isResponseOK = false;
      if (this.props.distributionSystemID != undefined) {
        fetch(APIBaseURL + '/reports/distributionsystem?distributionsystemid=' + this.props.distributionSystemID, {
          method: 'GET',
          headers: {
            "Content-type": "application/json",
            "User-UUID": getCookieValue('user_uuid'),
            "Token": getCookieValue('token')
          },
          body: null,

        }).then(response => {
          if (response.ok) {
            isResponseOK = true;
          }
          return response.json();
        }).then(json => {
          if (isResponseOK) {
            console.log(json);
            let pointList = [];
            json.forEach((currentCircuit, circuitIndex) => {
              json[circuitIndex]['points'].forEach((currentPoint, pointIndex) => {
                let pointItem = {}
                pointItem['circuit'] = currentCircuit['name'];
                pointItem['point'] = currentPoint['name'];
                pointItem['value'] = currentPoint['value'];
                pointItem['units'] = currentPoint['units'];
                pointList.push(pointItem);
              });
            });
            
            if (this._isMounted) {
              this.setState({ 
                pointList: pointList,
              });
            }
          } else {
            toast.error(json.description)
          }
        }).catch(err => {
          console.log(err);
        });
      }
    }, (60 + Math.floor(Math.random() * Math.floor(10))) * 1000); // use random interval to avoid paralels requests 
  }

  render() {
    const { t } = this.props;
    
    return (
      <Card className="h-100 bg-gradient">
        <CardHeader className="bg-transparent">
          <h5 className="text-white">{this.props.distributionSystemName}</h5>
          <div className="real-time-user display-1 font-weight-normal text-white">{this.state.latestUpdateDatetime}</div>
        </CardHeader>
        <CardBody className="text-white fs--1">
          <ListGroup flush className="mt-4">
          
            <ListGroupItem
              className="bg-transparent d-flex justify-content-between px-0 py-1 font-weight-semi-bold border-top-0"
              style={{ borderColor: listItemBorderColor }}
            >
              <p className="mb-0">{t('Circuit')}</p>
              <p className="mb-0">{t('Point')}</p>
              <p className="mb-0">{t('Realtime Value')}</p>
              <p className="mb-0">{t('Unit')}</p>
            </ListGroupItem>
            {this.state.pointList.map(pointItem => (
              <ListGroupItem key={uuid()}
                className="bg-transparent d-flex justify-content-between px-0 py-1"
                style={{ borderColor: listItemBorderColor }}
              >
                <p className="mb-0">{pointItem['circuit']}</p>
                <p className="mb-0 ">{pointItem['point']}</p>
                <p className="mb-0">{pointItem['value']}</p>
                <p className="mb-0">{pointItem['units']}</p>
              </ListGroupItem>
            ))}
          </ListGroup>
        </CardBody>
      </Card>
    );
  }
}

export default  withTranslation()(RealtimeChart);


1			import React, { Component } from 'react';
2			import { Line } from 'react-chartjs-2';
3			import range from 'lodash/range';
4			import { Card, CardHeader, CardBody, ListGroup, ListGroupItem } from 'reactstrap';
5			import { rgbaColor } from '../../../helpers/utils';
6			import { withTranslation } from 'react-i18next';
7			import uuid from 'uuid/v1';
8			import { APIBaseURL } from '../../../config';
9			import { getCookieValue, createCookie } from '../../../helpers/utils';
10			import { toast } from 'react-toastify';
11
12
13			const dividerBorder = '1px solid rgba(255, 255, 255, 0.15)';
14			const listItemBorderColor = 'rgba(255, 255, 255, 0.05)';
15
16			class RealtimeChart extends Component {
17			_isMounted = false;
18			refreshInterval;
19			refreshTimeout;
20			state = {
21			pointList: [],
22			};
23
24			componentWillUnmount() {
25			this._isMounted = false;
26			clearInterval(this.refreshInterval);
27			clearTimeout(this.refreshTimeout);
28			}
29
30			componentDidMount() {
31			console.log(this.props);
32			this._isMounted = true;
33			// fetch realtime data at the first time
34			let isResponseOK = false;
35			if (this.props.distributionSystemID != undefined) {
36			fetch(APIBaseURL + '/reports/distributionsystem?distributionsystemid=' + this.props.distributionSystemID, {
37			method: 'GET',
38			headers: {
39			"Content-type": "application/json",
40			"User-UUID": getCookieValue('user_uuid'),
41			"Token": getCookieValue('token')
42			},
43			body: null,
44
45			}).then(response => {
46			if (response.ok) {
47			isResponseOK = true;
48			}
49			return response.json();
50			}).then(json => {
51			if (isResponseOK) {
52			console.log(json);
53			let pointList = [];
54			json.forEach((currentCircuit, circuitIndex) => {
55			json[circuitIndex]['points'].forEach((currentPoint, pointIndex) => {
56			let pointItem = {}
57			pointItem['circuit'] = currentCircuit['name'];
58			pointItem['point'] = currentPoint['name'];
59			pointItem['value'] = currentPoint['value'];
60			pointItem['units'] = currentPoint['units'];
61			pointList.push(pointItem);
62			});
63			});
64			if (this._isMounted) {
65			this.setState({
66			pointList: pointList,
67			});
68			}
69			} else {
70			toast.error(json.description)
71			}
72			}).catch(err => {
73			console.log(err);
74			});
75			};
76
77			//fetch realtime data at regular intervals
78			this.refreshInterval = setInterval(() => {
79			let isResponseOK = false;
80			if (this.props.distributionSystemID != undefined) {
81			fetch(APIBaseURL + '/reports/distributionsystem?distributionsystemid=' + this.props.distributionSystemID, {
82			method: 'GET',
83			headers: {
84			"Content-type": "application/json",
85			"User-UUID": getCookieValue('user_uuid'),
86			"Token": getCookieValue('token')
87			},
88			body: null,
89
90			}).then(response => {
91			if (response.ok) {
92			isResponseOK = true;
93			}
94			return response.json();
95			}).then(json => {
96			if (isResponseOK) {
97			console.log(json);
98			let pointList = [];
99			json.forEach((currentCircuit, circuitIndex) => {
100			json[circuitIndex]['points'].forEach((currentPoint, pointIndex) => {
101			let pointItem = {}
102			pointItem['circuit'] = currentCircuit['name'];
103			pointItem['point'] = currentPoint['name'];
104			pointItem['value'] = currentPoint['value'];
105			pointItem['units'] = currentPoint['units'];
106			pointList.push(pointItem);
107			});
108			});
109
110			if (this._isMounted) {
111			this.setState({
112			pointList: pointList,
113			});
114			}
115			} else {
116			toast.error(json.description)
117			}
118			}).catch(err => {
119			console.log(err);
120			});
121			}
122			}, (60 + Math.floor(Math.random() * Math.floor(10))) * 1000); // use random interval to avoid paralels requests
123			}
124
125			render() {
126			const { t } = this.props;
127
128			return (
129			<Card className="h-100 bg-gradient">
130			<CardHeader className="bg-transparent">
131			<h5 className="text-white">{this.props.distributionSystemName}</h5>
132			<div className="real-time-user display-1 font-weight-normal text-white">{this.state.latestUpdateDatetime}</div>
133			</CardHeader>
134			<CardBody className="text-white fs--1">
135			<ListGroup flush className="mt-4">
136
137			<ListGroupItem
138			className="bg-transparent d-flex justify-content-between px-0 py-1 font-weight-semi-bold border-top-0"
139			style={{ borderColor: listItemBorderColor }}
140			>
141			<p className="mb-0">{t('Circuit')}</p>
142			<p className="mb-0">{t('Point')}</p>
143			<p className="mb-0">{t('Realtime Value')}</p>
144			<p className="mb-0">{t('Unit')}</p>
145			</ListGroupItem>
146			{this.state.pointList.map(pointItem => (
147			<ListGroupItem key={uuid()}
148			className="bg-transparent d-flex justify-content-between px-0 py-1"
149			style={{ borderColor: listItemBorderColor }}
150			>
151			<p className="mb-0">{pointItem['circuit']}</p>
152			<p className="mb-0 ">{pointItem['point']}</p>
153			<p className="mb-0">{pointItem['value']}</p>
154			<p className="mb-0">{pointItem['units']}</p>
155			</ListGroupItem>
156			))}
157			</ListGroup>
158			</CardBody>
159			</Card>
160			);
161			}
162			}
163
164			export default withTranslation()(RealtimeChart);
165

myems / myems-web

Push — master ( 669be3...4762c7 )

RealtimeChart.componentDidMount C

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like